<template>
  <div>
    <img src="../assets/test.jpg" height="100px" width="100%">
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="pink"
      text-color="#fff"
      active-text-color="black">
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">美容养颜</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3">减脂瘦身</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">食单商城</a></el-menu-item>
      <el-menu-item>
        <el-input v-model="input" placeholder="请输入食谱名" clearable>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-menu-item>
      <div align="right">
        <el-link type="primary" class="login">登录</el-link>&nbsp;&nbsp;&nbsp;
        <el-link type="primary" class="login">注册</el-link>
      </div>
    </el-menu>

    <el-carousel indicator-position="outside" align="center">
      <el-carousel-item><img src="../assets/images/home/test.jpg"></el-carousel-item>
      <el-carousel-item><img src="../assets/images/home/img.png"></el-carousel-item>
      <el-carousel-item><img src="../assets/images/home/test.jpg"></el-carousel-item>
      <el-carousel-item><img src="../assets/images/home/logo1.png"></el-carousel-item>
    </el-carousel>

    <el-table :data="pageInfo.list" border stripe>
      <!--      <el-table-column prop="image"><img :src="scope.row.image" alt="这是图片"></el-table-column>-->
      <el-table-column prop="id" label="编号"></el-table-column>

      <el-table-column prop="name" label="名字"></el-table-column>
      <!--      <template slot-scope="scope">
              <el-table-column porp="image"><img src = "scope.row.id.image"/></el-table-column>
            </template>-->

      <el-table-column porp="image" label="图片">
        <template slot-scope="scope">
          <img :src="tableImage(scope.row)" min-width="180" height="250"/>
<!--          <img src="C:/Users/hxd/OneDrive/桌面/1.jpg" min-width="180" height="250"/>-->
        </template>

      </el-table-column>

    </el-table>
    <!--
     :page-size="每页条数"
     :page-sizes="选择每页条数的选择器"
     :current-page="当前页面"
     :pager-count="页面按钮的数量"
     :total="pageInfo.total" -->
    <el-pagination
      :page-size="pageInfo.size"
      :page-sizes="pageSizes"
      :current-page="pageInfo.num"
      :pager-count="pageCount"
      :total="pageInfo.total"
      layout="sizes, prev, pager, next, jumper, ->, total"
      @current-change="pageHandle">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        tableImagePrefix: '../assets/images/cook/',
        input: '',
        activeIndex2: '1',
        cookbooks: [],
        pageInfo: {
          list: [{
            "id": 1,
            "cid": 3,
            "name": "美容秘方",
            "image": "1.jpg",
            "ingredient": "红枣",
            "process": "煮它"
          }, {
            "id": 2,
            "cid": 3,
            "name": "美容秘方",
            "image": "2.jpg",
            "ingredient": "..",
            "process": ".."
          }]
        },
        pageSizes: [3, 4, 5, 10],
        pageCount: 3,
        filepath: 'http://localhost:8989/CookBook/../CookBookImage/HeadPortrait/CookBook/'
        /* showAddHero:false,
        showUpdateHero:false,
        heroes:[],
        hero:{},
        ids:[],
        rules:{
          name:[
            {required:true,message:"名字不能为空",trigger:"blur"}
          ],
          weapon:[
            {required:true,message:"武器不能为空",trigger:"blur"}
          ],
          price:[
            {required:true,message:"价格不能为空",trigger:"blur"}
          ]
        }*/
      }
    },
    methods: {
      tableImage(row) {
        let url = 'https://fuss10.elemecdn.com/e/5d';
        url += '/4a731a90594a4af544c0c25941171jpeg.jpeg';
        return url;
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }, selectAll(pageNo, pageSize) {
        this.axios({
          method: 'get',
          url: '/cookbook/pageQuery/1/100',
          /*params:{
            pageNo:1,
            pageSize:100
          }*/
        }).then((resp) => {
          this.pageInfo = resp.data
        })
      }, pageHandle(page) {
        this.selectAll(page, 3)
      },/*getImgById(id){
      this.axios({
        method:'get',
        url:'/cookbook//getImgById/'+id,
      }).then((resp)=>{

      })
    }, byteToArray(path) {
      /!*let reg = new RegExp('\\\\', "g")//g,表示全部替换。
      path = path.replace(reg, "/");*!/
      return "http://localhost:8989/cookbook/getImgById?id=" + path
      /!*this.axios({
        method:'get',
        url:'/cookbook/getImgById/'+id,
      }).then((resp)=>{
        resp.data;
      })*!/
    }*/
      picUrl() {
        return "require('../../../../../CookBookImage/CookBook/";
      }
    },
    created() {
      this.selectAll(1, 100);

    }
  }
</script>

<style scoped>


  .login {
    font-size: 20px;
    padding-top: 15px;
    color: aliceblue;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
